//先导入vue
import Vue from 'vue'
//再导入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

//创建仓库
/*
    使用new Vuex.Store(参数)完成仓库的创建
    参数：状态机的配置对象,配置对象中常见的属性如下
    state:状态，值为一个对象,
    mutatations:用于完成对state修改的同步方式配置，值也是一个对象
    actions:用于完成异步操作的配置，值也是对象
    getters:在vuex中完成类似与组件中的计算属性的功能
    modules:用来完成模块化操作
*/
const store=new Vuex.Store({
    state:{
        count:10
    },
    mutations:{
        /**
         * mutations中的成员都是方法，这里的方法都是同步的，它的方法有两个参数
         * state:状态
         * payload:载荷：可以认为是传递过来的值
         */
        incrementSync(state,payload){
            console.log('------vuex的mutations的incrementSync----------');
            console.log('payload',payload);
            state.count=state.count+payload
        }
    },
    actions:{
        /**
         * actions中的成员都是方法，它的方式可以是异步的，也可以是同步的
         * 参数1，状态机上下文对象
         * 参数2:载荷
         */
        incrementAsync(cxt,payload){
            console.log('---------vuex的actions的incrementAsync--------------');
            setTimeout(() => {
                cxt.commit('incrementSync',payload)
            }, 5000);
        }
    },
    getters:{},
    modules:{}
})
//使用ES6默认导出的方式，将其导出
export default store
